@import "@/styles/__index.less";

.timeline-infos {
  position: relative;

  .timeline-item {
    position: relative;
    z-index: 1;
    height: 32px;
    display: flex;
    align-items: center;

    each(@event-colors, {
      .circle.@{key}, .tri.@{key} {
        background-color: @value;
      }
      
      &:nth-child(2n + 1) {
        .info.@{key} {
          background-color: #5FADF755;
          // background: linear-gradient(to right, @value, #00000000);
        }
      }

      .info.@{key} {
        // background: linear-gradient(to right, @value, #00000000);
      }
    });

    .circle {
      width: 11px;
      height: 11px;
      border-radius: 11px;
    }

    .tri {
      width: 22px;
      height: 25px;
      margin-left: 8px;
      clip-path: polygon(0 50%, 100% 100%, 100% 0);
    }

    .info {
      flex: 1;
      height: 25px;
      padding-left: 6px;
      margin-left: 10px;
      line-height: 25px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .line {
    position: absolute;
    left: 5px;
    top: 0px;
    width: 1px;
    height: 100%;
    background-color: #5FADF7;
  }
}